import React from "react";

// styled-components是css-in-js的一种解决方案
// 让我们在js里面写css样式
import styled from "styled-components";

// const Hello = styled.p`
//   color: red;
//   font-size: 50px;
//   font-weight: 900;
// `;

// 也可以根据props来接受参数
const Hello = styled.p`
  color: ${(props) => props.color};
  font-size: 50px;
  font-weight: 900;
`;

const App = () => {
  return (
    <>
      <h2>css-in-js</h2>
      <Hello color="red">hello react!</Hello>
      <Hello color="green">hello react!</Hello>
    </>
  );
};

export default App;
